<template>
  <div class="space-y-8">
    <h2 class="text-2xl font-bold">账号</h2>
    
    <!-- 基础账号绑定 -->
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <div class="space-y-6">
        <!-- 手机号绑定 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <el-icon :size="24" color="#409EFF" class="mr-4">
              <Iphone />
            </el-icon>
            <div>
              <div class="font-medium">手机号</div>
              <div class="text-sm text-gray-500">未绑定手机号</div>
            </div>
          </div>
          <el-button type="primary" size="small" @click="bindPhone">绑定</el-button>
        </div>

        <!-- 邮箱绑定 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <el-icon :size="24" color="#67C23A" class="mr-4">
              <Message />
            </el-icon>
            <div>
              <div class="font-medium">邮箱</div>
              <div class="text-sm text-gray-500">未绑定邮箱</div>
            </div>
          </div>
          <el-button type="primary" size="small" @click="bindEmail">绑定</el-button>
        </div>
      </div>
    </div>

    <!-- 第三方应用绑定 -->
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold mb-6">第三方应用</h3>
      <div class="space-y-6">
        <!-- 微信绑定 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4">
              <span class="text-white text-sm font-bold">微</span>
            </div>
            <div>
              <div class="font-medium">微信</div>
              <div class="text-sm text-gray-500">未绑定微信</div>
            </div>
          </div>
          <el-button type="primary" size="small" @click="bindWechat">关联</el-button>
        </div>

        <!-- QQ绑定 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-4">
              <span class="text-white text-sm font-bold">Q</span>
            </div>
            <div>
              <div class="font-medium">QQ</div>
              <div class="text-sm text-gray-500">未绑定QQ</div>
            </div>
          </div>
          <el-button type="primary" size="small" @click="bindQQ">关联</el-button>
        </div>

        <!-- GitHub绑定 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center mr-4">
              <span class="text-white text-sm font-bold">G</span>
            </div>
            <div>
              <div class="font-medium">GitHub</div>
              <div class="text-sm text-gray-500">未绑定GitHub</div>
            </div>
          </div>
          <el-button type="primary" size="small" @click="bindGithub">关联</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Iphone, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const bindPhone = () => {
  ElMessage.info('手机号绑定功能开发中...')
}

const bindEmail = () => {
  ElMessage.info('邮箱绑定功能开发中...')
}

const bindWechat = () => {
  ElMessage.info('微信关联功能开发中...')
}

const bindQQ = () => {
  ElMessage.info('QQ关联功能开发中...')
}

const bindGithub = () => {
  ElMessage.info('GitHub关联功能开发中...')
}
</script>

<style scoped>
.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.space-y-8 > * + * {
  margin-top: 2rem;
}
</style>
